<template>
  <div class="meihua">
    <h1>梅花易数时间起卦</h1>
    <div class="input-section">
      <label for="date">选择日期和时间：</label>
      <input type="datetime-local" v-model="selectedDate" id="date" />
      <button @click="calculateHexagram">起卦</button>
    </div>
    <div v-if="result" class="result-section">
      <h2>起卦结果</h2>
      <p>农历日期：{{ lunarDate }}</p>
      <p>上卦：{{ result.upper }}</p>
      <p>下卦：{{ result.lower }}</p>
      <p>动爻：{{ result.movingLine }}</p>
      <p>变卦上：{{ result.newUpper }}</p>
      <p>变卦下：{{ result.newLower }}</p>
    </div>
  </div>
</template>

<script>
// 尝试导入，如果失败则处理错误
let Lunar;
try {
  const lunarJS = require('lunar-javascript');
  Lunar = lunarJS.Lunar;
} catch (error) {
  console.error('请确保已安装 lunar-javascript 包:', error);
}

export default {
  name: 'HelloWorld',
  data() {
    return {
      selectedDate: null,
      lunarDate: '',
      result: null,

    };
  },
  methods: {
    calculateHexagram() {
      if (!this.selectedDate) {
        alert('请选择日期和时间！');
        return;
      }

      if (!Lunar) {
        alert('农历计算模块加载失败，请检查依赖安装！');
        return;
      }

      // 使用农历库计算农历日期
      const lunar = Lunar.fromDate(new Date(this.selectedDate));
      this.lunarDate = lunar.toString();

      // 根据梅花易数时间起卦法计算卦象
      
      const date = new Date(this.selectedDate);
      const hour = date.getHours();
      const minute = date.getMinutes();
      function getTimeZhiIndex(hour) {
        // 子时(23-1点)为0，丑时(1-3点)为1，以此类推
        if (hour >= 23 || hour < 1) return 0; // 子时

        return Math.floor((hour + 1) / 2);
      }
      const timeZhiIndex = getTimeZhiIndex(hour);
      const upper = (lunar.getYearZhiIndex()+1+date.getMonth() + 1 + date.getDate()) % 8 || 8; // 上卦
      const lower = (date.getMonth() + 1 + date.getDate()+timeZhiIndex+1 ) % 8 || 8; // 下卦
      const movingLine = (date.getMonth() + 1 + date.getDate()+timeZhiIndex+1 ) % 6 || 6; // 动爻
      //先天八卦
      const hexagrams = [
        '☰', // 乾
        '☱', // 兑
        '☲', // 离
        '☳', // 震
        '☴', // 巽
        '☵', // 坎
        '☶', // 艮
        '☷', // 坤
      ];
      //后天八卦,坎1、坤2、震3、巽4、中5、乾6、兑7、艮8、离9
      const hexagrams2 = [
        '☵', // 坎
        '☷', // 坤
        '☳', // 震
        '☴', // 巽
        '中', // 中
        '☰', // 乾
        '☱', // 兑
        '☶', // 艮
        '☲', // 离
      ];
      //八卦
      const guaxiang=[
        {name:'乾',yao:7,},
        {name:'兑',yao:6,},
        {name:'离',yao:5,},
        {name:'震',yao:4,},
        {name:'巽',yao:3,},
        {name:'坎',yao:2,},
        {name:'艮',yao:1,},
        {name:'坤',yao:0,},
      ]
      console.log(upper, lower, movingLine);
      //计算变卦,将上卦和下挂拼接成六位的二进制数,然后动爻的位置取反
      const binary = ((8-lower) << 3) | (8-upper);
      const binaryStr = binary.toString(2).padStart(6, '0');
      
      //movingLine-1是因为数组从0开始,且从后往前数
      const movingLineIndex = movingLine-1;
      const binaryArr = binaryStr.split('');
      binaryArr[movingLineIndex] = binaryArr[movingLineIndex] === '1' ? '0' : '1';
      console.log("🚀 ~ calculateHexagram ~ binaryArr[movingLineIndex]:", binaryArr)
      //把后三位和前三位分开,后三位是上卦
      const lowerBinary = binaryArr.slice(0, 3).join('');
      const upperBinary = binaryArr.slice(3).join('');
      console.log("🚀 ~ calculateHexagram ~ upperBinary:", upperBinary, lowerBinary)
      const newUpper = parseInt(upperBinary, 2) + 1;
      const newLower = parseInt(lowerBinary, 2) + 1;
      console.log("🚀 ~ calculateHexagram ~ newUpper:", newUpper, newLower)

      // 计算卦象
      this.result = {
        upper: `${hexagrams[upper-1]}${guaxiang[upper-1].name}卦`,
        lower: ` ${hexagrams[lower-1]}${guaxiang[lower-1].name}卦`,
        movingLine: `第 ${movingLine} 爻动`,
        newUpper: `${hexagrams[8-newUpper]}${guaxiang[8-newUpper].name}卦`,
        newLower: ` ${hexagrams[8-newLower]}${guaxiang[8-newLower].name}卦`,
      };
    },
  },
};
</script>

<style scoped>
.meihua {
  font-family: 'Arial', sans-serif;
  text-align: center;
  padding: 20px;
  background: linear-gradient(to bottom, #f0f8ff, #e6e6fa);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
  color: #4b0082;
  margin-bottom: 20px;
}
.input-section {
  margin-bottom: 20px;
}
input[type="datetime-local"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #4b0082;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #6a5acd;
}
.result-section {
  margin-top: 20px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}
p {
  margin: 5px 0;
  color: #333;
}
</style>
